import React, {Component} from 'react';
import ApiDataTb from './ApiDataTb';
import MarkDown from '../../../components/MarkDown';
//加入响应式布局
import { enquireScreen } from 'enquire-js';

/**
 * controller 注释说明
 *
 * @author zhangby
 * @date 2018/6/13 下午1:51
 */
export default class ControllerMenuTb extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [
                {
                    param:"text",
                    remark:"controller注释文字<code>menu主菜单名</code>",
                    isBlack:"不能为空",
                    default:"",
                    eg:"用户管理",
                },
                {
                    param:"@action",
                    remark:`jfinal对应的Controller路由配置<br/><br/>
                        <strong>如：</strong><br/><br/>
                        <em>
                            /**
                             * 配置路由
                             */<br/>
                            @Override<br/>
                            public void configRoute(Routes me) {<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;//配置api路由<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;me.add("/user", UserController.class);<br/>
                            }
                        </em><br><br>
                        <strong>即：</strong><code>@action /user</code>
                    `,
                    isBlack:"不能为空",
                    default:"",
                    eg:"@action /user",
                },
                {
                    param:"@author",
                    remark:"创建者",
                    isBlack:"可为空",
                    default:"",
                    eg:"@author zhangby",
                },
                {
                    param:"@date",
                    remark:"创建时间",
                    isBlack:"可为空",
                    default:"",
                    eg:"2018/6/12 下午3:26",
                },
            ],
            mobileDataSource:`
| 参数 | 说明 | 可否为空 | 默认值 | 样例 |
| - | :-: | :-: | :-: | -: | 
| text | menu主菜单名 | false |  | 用户管理 |
| @action | 路由配置 | false |  | @action /user |
| @author | 创建者 | true |  | @author zhangby |
| @date | 创建时间 | true |  | 2018/6/12 下午3:26 |

`,
            isMobile: false
        };
    }

    componentDidMount() {
        this.enquireScreenRegister();
    }

    enquireScreenRegister = () => {
        const mediaCondition = 'only screen and (max-width: 720px)';

        enquireScreen((mobile) => {
            this.setState({
                isMobile: mobile,
            });
        }, mediaCondition);
    };

    render() {
        // 根据当前状态做显示隐藏
        const { isMobile } = this.state;
        return (
            <div>
                {isMobile?<MarkDown source={this.state.mobileDataSource}/>:
                    <ApiDataTb dataSource={this.state.dataSource} />}
            </div>
        )
    }
}